/**
* Ata
*/
<template>
    <el-form v-loading="loading" :model="formData" :rules="isEditPage ? formRules : {}" ref="formRef"
        label-width="120px" :scroll-to-error="true">
        <vp-card>
            <el-row style="flex: 1;">
                <vp-col :span="1">
                    <el-form-item prop="zjh">
                        <template #label><vp-label zh="章节号" en="Chapter No." align="left" /></template>
                        <el-input v-model="formData.zjh" v-trim maxlength="20" v-if="type === 'add'"></el-input>
                        <span v-else>{{ formData.zjh }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item prop="zwms">
                        <template #label><vp-label zh="中文描述" en="CN Desc." align="left" /></template>
                        <el-input v-model="formData.zwms" maxlength="100" v-if="isEditPage"></el-input>
                        <span v-else>{{ formData.zwms }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item prop="ywms">
                        <template #label><vp-label zh="英文描述" en="EN Desc." align="left" /></template>
                        <el-input v-model="formData.ywms" maxlength="100" v-if="isEditPage"></el-input>
                        <span v-else>{{ formData.ywms }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item prop="bz">
                        <template #label><vp-label zh="备注" en="Remark" align="left" /></template>
                        <el-input type="textarea" v-model="formData.bz" v-trim maxlength="1000"
                            v-if="isEditPage"></el-input>
                        <span v-else style="white-space:pre">{{ formData.bz }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
        </vp-card>

    </el-form>
</template>
<script setup lang="ts" name="Ata">
import { defineAsyncComponent, onMounted, ref, watch, computed } from "vue";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";

const emits = defineEmits(['formSubmited']);

const formData = ref({
    id: "",
    zjh: "",
    zwms: "",
    ywms: "",
    bz: "",
});
const formRules = {
    zjh: [validateUtils.notNull, validateUtils.notChinese],
    zwms: [validateUtils.notNull],
    ywms: [validateUtils.notNull],
}

const initFormData = () => {
    formData.value = {
        id: "",
        zjh: "",
        zwms: "",
        ywms: "",
        bz: "",
    }
}

const type = ref('add');
const loading = ref(false);
const formRef = ref();

const props = defineProps<{
    id: string,
    type: string,
}>()

onMounted(() => {
    handleOpen(props.type, props.id);
})

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});

const handleOpen = (_type: string, id: string) => {
    type.value = _type;
    initFormData();
    if (type.value != "add") {
        loading.value = true;
        request.get(`/basicData/ata/${id}`).then((res) => {
            formData.value = {
                ...formData.value,
                ...res.data,
            };
            loading.value = false;
            emits("formSubmited", formData.value);
        });
    }
}

const getData = (zt: number): Promise<any> => {
    let promise = new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            if (valid) {
                resolve({
                    ...formData.value,
                });
            } else {
                reject();
            }
        })
    })
    return promise;
};


defineExpose({
    getData
})

</script>
<style scoped>
:deep(.row-warning1) {
    color: var(--el-color-danger);
}
</style>